<template>
  <el-card>
    <!-- <p>CurrentStstus</p> -->
    <el-row>
      <el-col :span="8">
        <div class="statistic-card">
          <el-statistic :value="stringZUUU">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                <span>ZUUU</span>
                <el-tooltip effect="dark" :content="codeZUUU" placement="top">
                  <el-icon style="margin-left: 4px" :size="12">
                    <InfoFilled />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <!-- <div class="statistic-footer">
            <div class="footer-item">
              <span>month on month</span>
              <span class="red">
                12%
                <el-icon>
                  <CaretBottom />
                </el-icon>
              </span>
            </div>
          </div> -->
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
// CurrentStstus
import { ref, computed, onMounted, onUnmounted, h, nextTick } from "vue";
import axios from "axios";
import useActivityStore from "@/store/activity.js";

const activityStore = useActivityStore();

const codeZUUU = computed(() => activityStore.runwayCodeZUUU);
const codeZUTF = computed(() => activityStore.runwayCodeZUTF);
const codeZUMY = computed(() => activityStore.runwayCodeZUMY);

const stringZUUU = computed(() => {
  let code = activityStore.runwayCodeZUUU;
  let digitDeparture = 1;
  let digitArrival = 2;
  let digitBoth = 3;
  let direction = code.substring(0, 1) == "N" ? "北" : "南";
  let arrival = new Array();
  let departure = new Array();
  let codeRunwayWest = code.substring(1, 2);
  let codeRunwayEast = code.substring(2, 3);

  if (codeRunwayWest == digitDeparture || codeRunwayWest == digitBoth) {
    departure.push(direction == "北" ? "02L" : "20R");
  }

  if (codeRunwayEast == digitDeparture || codeRunwayEast == digitBoth) {
    departure.push(direction == "北" ? "02R" : "20L");
  }

  if (codeRunwayWest == digitArrival || codeRunwayWest == digitBoth) {
    arrival.push(direction == "北" ? "02L" : "20R");
  }

  if (codeRunwayEast == digitArrival || codeRunwayEast == digitBoth) {
    arrival.push(direction == "北" ? "02R" : "20L");
  }
  return `起:${departure.join(' ')} 落:${arrival.join(' ')}`;
});
</script>

<style scoped>
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
</style>
